<template>
    <div class="search">
        <div class="sea-nav">
            <van-icon name="search" size="25"  color="#ACACAC"/>
            <input type="text" v-model="inpvalue" @input="searchEvent"/>           
        </div>
        <span @click="cancel">取消</span>
        <p class="tit">热搜榜</p>
        <ul class="hotsearch">
            <li
                v-for="(item, index) in hotSearchList"
                :key="item.id"
                @click="getHot(item.searchWord)"
            >
                <span class="num"> {{ index + 1 }} </span>
                <span class="searchword">{{ item.searchWord }}</span>
            </li>
        </ul>
        <p class="more" v-show="showHot1" @click="morehot">
        展开更多
        <van-icon name="arrow" size="14"/>
        </p>
            <p class="tit">音乐专区</p>
    <div class="musicSort">
      <div @click="$router.push('/singerSort')">
        <p>歌手分类</p>
        <p class="tit-foot">选择你喜欢的歌手</p>
      </div>
      <div>
        <p>曲风分类</p>
        <p class="tit-foot" style="background:#rgb(249 81 70 / 37%)">查看你的专属曲风分类</p>
      </div>
      <div>
        <p>影视原生专区</p>
        <p class="tit-foot" style="background:rgb(129 195 220 / 76%)">选听歌追剧好时光</p>
      </div>
      <div>
        <p>电音专区</p>
        <p class="tit-foot" style="background:#rgb(198 160 78 / 28%)">全球热门电音嗨翻全场</p>
      </div>
      <div>
        <p>说唱专区</p>
        <p class="tit-foot" style="background:#rgb(132 193 214 / 91%)">说唱人物志Vol.6</p>
      </div>
      <div>
        <p>摇滚专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">国摇新生势力等你来听</p>
      </div>
      <div>
        <p>古典专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">大咖Vlo.2:古典VS流行</p>
      </div>
      <div>
        <p>AGG专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">测测你是AGG大粉头吗</p>
      </div>
      <div>
        <p>DJ专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">潮流热歌一网打尽</p>
      </div>
      <div>
        <p>亲子专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">陪伴宝贝一起成长</p>
      </div>
      <div>
        <p>中国特色专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">了解中国传统经典文化</p>
      </div>
      <div>
        <p>经典专区</p>
        <p class="tit-foot" style="background:#rgb(255 255 255 / 7%)">致敬时代，留住经典</p>
      </div>
    </div>
    <p @click="morehot2" v-show="showHot2" class="more">
      展开更多专区
      <van-icon name="arrow" size="14" />
    </p>
    </div>
</template>

<script>
export default {    
    data() {       
        return {
            hotSearchList:[],
            showHot1: true,//展开更多热搜
            showHot2: true,//展开更多专区
            inpvalue:'',
            len:false,
            timer: null,
            
        };
    },
    methods: {   
        // 搜索框取消
      cancel(){
          this.$router.go(-1);
      },
      // 搜索建议
      search(){
        console.log(this.inpvalue)
      },
      // 热搜排行点击
      getHot(val){
        this.$router.push({
          path: "/search/suggest",
          query:{keyword:val},
              });
      },
      // 跳转搜索页面
      searchEvent() {
        this.clearTimer()
            if (this.inpvalue && this.inpvalue.length > 0) {
                this.len = true
                this.timer = setTimeout(() => {
                    this.$router.push({
                      path: "/search/suggest",
                      query:{keyword:this.inpvalue},
                    });
                }, 100)
            } else {
                if (this.keyword === '') {
                    this.len = false
                    return
                }
            }
        },
        clearTimer() {
              if (this.timer) {
                  clearTimeout(this.timer)
              }     
        },
        // 热搜列表
      async gethotsearch() {
        const res = await this.$http.get(
        "http://localhost:3000/search/hot/detail"
      );
        this.hotSearchList = res.data.data;
      },
      morehot(){
        document.querySelector(".hotsearch").style.height = "300px";
        this.showHot1 = false;
      },
      morehot2(){
        document.querySelector(".musicSort").style.height = "390px";
        this.showHot2 = false;
      },
    },
    created() {  
        this.gethotsearch();
    },
}
</script>
<style scoped>
body{
    background: #fdfdfd00;
}
.search{
    width: 100%;
}
.sea-nav {
  width: 300px;
  height: 35px;
  border-radius: 15px;
  display: inline-block;
  margin: 7px 12px 0 18px;
  background: #F5F5F4;
  padding: 0 10px;
  box-sizing: border-box;
  padding-top: 5px;
}
.sea-nav input {
  width: 180px;
  height: 80%;
  vertical-align: middle;
  display: inline-block;
  border: none;
  background: #F5F5F4;
  padding-left: 5px;
  margin-bottom: 5px;
}
.tit {
  margin: 15px 13px;
  font-size: 13px;
  font-weight: bold;
}
.hotsearch {
  width: 100%;
  height: 145px;
  background: #f8f8f770;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.hotsearch li {
  width: 40%;
  line-height: 1.8;
  display: flex;
  margin: 1px 15px;
  font-weight: 400;
}
.hotsearch li:nth-child(-n+3) .num{
    font-weight: 600;
    color: #6BB5C8;
}
.hotsearch li:nth-child(-n+3) .searchword{
    font-size: 14px;
    font-weight: 600;
}
.hotsearch li:nth-child(-n+3)::after{
    content: 'Hot';
    position: relative;
    top: 1px;
    right: -4px;
    color: red;
    font-weight: 600;
    font-size: 12px;
    font-style:italic;
}
.hotsearch li:nth-child(5)::after{
    content: 'NEW';
    position: relative;
    top: 2px;
    right: -4px;
    color: #49B846;
    font-weight: 600;
    font-size: 12px;
    font-style:italic;
}
.hotsearch li .num{
    color: #949495;
}
.hotsearch li span:first-child {
  width: 16px;
  font-size: 15px;
}
.hotsearch li span:last-child {
  font-size: 14px;
  margin-left: 3px;
}
.more {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
}
.musicSort {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 256px;
  overflow: hidden;
}
.musicSort .tit-foot{
  width: 165px;
  height: 20px;
  display: block;
  background: #8f817338;
  margin-left: -10px;
  margin-top: 8px;
  text-indent: 10px;
}
.musicSort > div {
  width: 44%;
  height: 55px;
  padding: 5px 10px;
  box-sizing: border-box;
  border-radius: 10px;
  line-height: 1.5;
  margin-bottom: 10px;
  overflow: hidden;
}
.musicSort > div p:first-child {
  color: #fff;
  font-size: 15px;
}
.musicSort > div p:last-child {
  color: rgb(236, 236, 236);
  font-size: 13px;
}
.musicSort > div:first-child {
  background-image: linear-gradient(to right, #8F8173 0%, #DACCC3 100%);
}
.musicSort > div:nth-child(2) {
  background-image: linear-gradient(to right, #FB6659 0%, #FB9588 100%);
}
.musicSort > div:nth-child(3) {
  background-image: linear-gradient(
    to right,
    #53ABBF 0%,
    #72BCD3 48%,
    #93CAE6 100%
  );
}
.musicSort > div:nth-child(4) {
  background-image: linear-gradient(to right, #C19A45 0%, #D7B773 50%,#F0D8A7 100%);
}
.musicSort > div:nth-child(5) {
  background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}
.musicSort > div:nth-child(6) {
  background-image: linear-gradient(
    to right,
    #D35C2C 0%,
    #DD7B4A 50%,
    #F2B17E 100%
  );
}
.musicSort > div:nth-child(7) {
  background-image: linear-gradient(to right, #6BB0AB 0%, #7CBDB5 50%,#98CEBF 100%);
}
.musicSort > div:nth-child(8) {
  background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
.musicSort > div:nth-child(9) {
  background-image: linear-gradient(
    to right,
    #ff8177 0%,
    #ff867a 0%,
    #ff8c7f 21%,
    #f99185 52%,
    #cf556c 78%,
    #b12a5b 100%
  );
}
.musicSort > div:nth-child(10) {
  background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
}
.musicSort > div:nth-child(11) {
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
}
.musicSort > div:nth-child(12) {
  background-image: linear-gradient(
    -225deg,
    #77ffd2 0%,
    #6297db 48%,
    #1eecff 100%
  );
}
</style>